<script setup>
import BaseButton from '@/components/base/BaseButton.vue'
import BaseInput from '@/components/base/BaseInput.vue'
import uniForms from '@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue'
import uniFormsItem from '@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue'
import { ref } from 'vue'
import { login } from '@/api/login'
import { useStore } from 'vuex'
import useLocaleNavigationBarTitle from '@/composables/useLocaleNavigationBarTitle'
import useLocale from '@/composables/useLocale'

const store = useStore()

useLocaleNavigationBarTitle('login')
const { t } = useLocale()

async function handleLogin() {
    try {
        const data = await formRef.value.validate()
        uni.showLoading({
            title: t('logining'),
        })
        const resp = await login({
            phoneOrEmail: data.email,
            sendType: 1,
            password: data.password,
        })
        if (resp.status === 200) {
            uni.showToast({
                title: t('loginSuccess'),
                icon: 'none',
            })
            store.commit('user/setToken', resp.data.token)
            store.dispatch('user/setUser')
            uni.hideLoading()
            uni.reLaunch({
                url: '/pages/index/index',
            })
        }
    } catch (_) {
        /* empty */
    }
}

const fields = {
    email: {
        placeholder: t('pleaseEnterEmail'),
        component: BaseInput,
        type: 'email',
        rules: [
            {
                required: true,
                errorMessage: t('pleaseEnterEmail'),
            },
            {
                format: 'email',
                errorMessage: t('pleaseEnterValidEmail'),
            },
        ],
    },
    password: {
        placeholder: t('pleaseEnterPassword'),
        component: BaseInput,
        password: true,
        type: 'password',
        rules: [
            {
                required: true,
                errorMessage: t('pleaseEnterPassword'),
            },
        ],
    },
}
const formData = ref({
    email: '',
    password: '',
})
const formRef = ref(null)
</script>

<template>
    <view class="flex justify-center px-8">
        <view class="flex w-full max-w-96 flex-col pt-20">
            <uni-forms ref="formRef" :model-value="formData">
                <uni-forms-item
                    v-for="({ rules, ...attrs }, name) in fields"
                    :key="name"
                    :rules="rules"
                    :name="name"
                >
                    <BaseInput v-bind="attrs" v-model="formData[name]" />
                </uni-forms-item>
            </uni-forms>
            <BaseButton class="mt-2" @click="handleLogin">
                {{ t('login') }}
            </BaseButton>
            <view class="mt-3 flex justify-between text-sm">
                <view class="flex items-center justify-center">
                    <text>{{ t('noAccount') }}</text>
                    <navigator url="/pages/auth/registration">
                        <text class="ml-1 text-violet-700">
                            {{ t('register') }}
                        </text>
                    </navigator>
                </view>
                <navigator url="/pages/auth/forgot-password">
                    <view class="">{{ t('forgotPassword') }}</view>
                </navigator>
            </view>
        </view>
    </view>
</template>
